<template>
    <van-nav-bar title="地址" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
    <!-- 新增地址 -->
    <van-action-sheet v-model:show="isshowadd" >
        <van-address-edit :area-list="areaList" :show-delete="showdelete" :address-info="addressInfo" show-postal show-set-default
            show-search-result :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" />
    </van-action-sheet>
    
</template>
<script lang='ts' setup>
import { ref } from 'vue';
// 引入函数形式的组件
import { addresslist } from '@/api/addressapi'
// 引入用户数据管理仓库
import { useUserStore } from '@/stores/userStore';
// 引入中国省市区数据 --先安装插件
import { areaList } from '@vant/area-data';
// 引入地址管理接口
import { addressadd,deleteaddress } from '@/api/addressapi'
// 引入类型定义
import type { AddressListAddress } from 'vant';

console.log(areaList);
const userStore = useUserStore()      // 用户store实例对象
let isshowadd = ref(false)            // 是否显示新增地址   
const chosenAddressId = ref('1')      // 默认选中的地址
const addressInfo = ref({})
const list = ref<AddressListAddress[]>([]);    // 地址列表
const searchResult = ref([]);                  // 详细地址搜索结果
const areaCode=ref<string>('')                 // 地区编码
const addressid=ref<string>('')                // 地址id
const showdelete=ref<boolean>(false)

// 调用地址列表接口
let getlistdata=()=>{
    addresslist({ userid: userStore.userId }).then((res: any) => {
        console.log('地址列表接口', res);
        if(res.code==200){
            list.value=res.data
            list.value.forEach((item:any,index:number)=>{
                item.id=index
                item.address=item.province+item.city+item.county+item.addressDetail
            })
        }
    })
}
getlistdata()
// 点击新增地址按钮
const onAdd = () => {
    // 设置地址信息初始值为空
    addressInfo.value={}
    // 显示地址编辑面板
    isshowadd.value = true;
    // 不显示删除按钮
    showdelete.value=false
}
// 点击保存按钮
const onSave = (content: any) => {
    // 调用添加地址接口
    console.log('content',content);
    addressadd({
        userid: userStore.userId,
        name: content.name,
        tel: content.tel,
        province: content.province,
        city: content.city,
        county: content.county,
        addressDetail: content.addressDetail,
        isDefault: content.isDefault
    }).then((res: any) => {
        console.log('添加地址接口', res);
        if (res.code == 200) {
            // list.value.push({
            //     id: list.value.length,
            //     name: content.name,
            //     tel: content.tel,
            //     address: `${content.province}${content.city}${content.county}${content.addressDetail}`,
            //     isDefault: content.isDefault,
            //     postalCode:content.postalCode,
            //     areaCode:content.areaCode
            // })
            areaCode.value=content.areaCode
            console.log('地区编码',areaCode.value);
            
            // 关闭地址编辑面板
            isshowadd.value = false;
            // 重新渲染页面
            getlistdata()
        }

    })
}

// 点击编辑地址图标
const onEdit = (item:any, index:number) => {
    console.log('编辑',item, index);
    console.log('地址id',item.addressid);
    console.log('地区编码',areaCode.value);
    // 显示编辑地址面板
    isshowadd.value = true;
    // 显示删除按钮
    showdelete.value=true
    // 设置地址信息初始值
    addressInfo.value = {
        id: item.userId,
        name: item.name,
        tel: item.tel,
        isDefault: item.isDefault,
        province: item.province,
        city: item.city,
        county: item.county,
        addressDetail: item.addressDetail,
    }
    // 设置地址id
    addressid.value=item.addressid
    
    
}


// 点击删除按钮
const onDelete = (content:any) => {
    console.log('content',content);
    // deleteaddress(addressid)
    console.log('addressid',addressid.value);
    deleteaddress({addressid:addressid.value}).then((res:any)=>{
        if(res.code==200){
            console.log('删除地址',res);
            // 关闭地址编辑面板
            isshowadd.value = false;
            // 重新渲染页面
            getlistdata() 
        }
    })
}
const onChangeDetail = (val:any) => {
    // if (val) {
    //     searchResult.value = [
    //         {
    //             name: '黄龙万科中心',
    //             address: '杭州市西湖区',
    //         },
    //     ];
    // } else {
    //     searchResult.value = [];
    // }
};
</script>
<style lang="scss" scoped>

</style>
